<!--
 * Tencent is pleased to support the open source community by making 蓝鲸 available.
 * Copyright (C) 2017-2022 THL A29 Limited, a Tencent company. All rights reserved.
 * Licensed under the MIT License (the "License"); you may not use this file except
 * in compliance with the License. You may obtain a copy of the License at
 * http://opensource.org/licenses/MIT
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
 * either express or implied. See the License for the specific language governing permissions and
 * limitations under the License.
-->

<template>
  <div class="host-selector-layout clearfix"
    v-bkloading="{ isLoading: $loading(Object.values(request)) }">
    <div class="wrapper clearfix">
      <div class="wrapper-column wrapper-left fl">
        <h2 class="title">{{$t('选择主机')}}</h2>
        <bk-select class="selector-type"
          :clearable="false"
          :disabled="!!displayNodes.length"
          v-model="type">
          <bk-option id="topology" :name="$t('业务拓扑')"></bk-option>
          <bk-option id="custom" name="IP"></bk-option>
        </bk-select>
        <keep-alive>
          <component :is="activeComponent" class="selector-component" ref="dynamic"></component>
        </keep-alive>
      </div>
      <div class="wrapper-column wrapper-right fl">
        <div class="selected-count">
          <i18n path="已选择N台主机">
            <template #count><span class="count">{{selected.length}}</span></template>
          </i18n>
        </div>
        <bk-table
          :data="selected"
          :outer-border="false"
          :header-border="false"
          :header-cell-style="{ background: '#fff' }"
          :height="369">
          <bk-table-column :label="$t('内网IP')">
            <template slot-scope="{ row }">
              {{row.host.bk_host_innerip}}
              <span class="repeat-row" v-if="repeatSelected.includes(row)">{{$t('IP重复')}}</span>
            </template>
          </bk-table-column>
          <bk-table-column :label="$t('云区域')" show-overflow-tooltip>
            <template slot-scope="{ row }">{{row.host.bk_cloud_id | foreignkey}}</template>
          </bk-table-column>
          <bk-table-column :label="$t('操作')">
            <bk-button slot-scope="{ row }" text @click="handleRemove(row)">{{$t('移除')}}</bk-button>
          </bk-table-column>
        </bk-table>
      </div>
    </div>
    <div class="layout-footer">
      <bk-button class="mr10" theme="primary" :disabled="!selected.length" @click="handleNextStep">
        {{confirmText || $t('下一步')}}
      </bk-button>
      <bk-button theme="default" @click="handleCancel">{{$t('取消')}}</bk-button>
    </div>
  </div>
</template>

<script>
  import has from 'has'
  import { foreignkey } from '@/filters/formatter.js'
  import HostSelectorTopology from './host-selector-topology.vue'
  import HostSelectorCustom from './host-selector-custom.vue'
  export default {
    name: 'cmdb-host-selector',
    components: {
      HostSelectorTopology,
      HostSelectorCustom
    },
    filters: {
      foreignkey
    },
    props: {
      exist: {
        type: Array,
        default: () => ([])
      },
      exclude: {
        type: Array,
        default: () => ([])
      },
      confirmText: {
        type: String,
        default: ''
      },
      displayNodes: {
        type: Array,
        default: () => ([])
      }
    },
    data() {
      return {
        components: {
          topology: HostSelectorTopology,
          custom: HostSelectorCustom
        },
        activeComponent: null,
        type: 'topology',
        filter: '',
        repeatSelected: [],
        uniqueSelected: [],
        request: {
          internal: Symbol('topology'),
          instance: Symbol('instance'),
          host: Symbol('host')
        }
      }
    },
    computed: {
      selected() {
        return [...this.repeatSelected, ...this.uniqueSelected]
      }
    },
    watch: {
      type: {
        immediate: true,
        handler(type) {
          this.activeComponent = this.components[type]
        }
      }
    },
    created() {
      this.setSelected(this.exist)
    },
    methods: {
      handleRemove(hosts) {
        const removeData = Array.isArray(hosts) ? hosts : [hosts]
        const ids = [...new Set(removeData.map(data => data.host.bk_host_id))]
        const selected = this.selected.filter(target => !ids.includes(target.host.bk_host_id))
        this.setSelected(selected)
      },
      handleSelect(hosts) {
        const selectData = Array.isArray(hosts) ? hosts : [hosts]
        const ids = [...new Set(selectData.map(data => data.host.bk_host_id))]
        const uniqueData = ids.map(id => selectData.find(data => data.host.bk_host_id === id))
        const newSelectData = []
        uniqueData.forEach((data) => {
          const isExist = this.selected.some(target => target.host.bk_host_id === data.host.bk_host_id)
          if (!isExist) {
            newSelectData.push(data)
          }
        })
        if (newSelectData.length) {
          this.setSelected([...this.selected, ...newSelectData])
        }
      },
      setSelected(selected) {
        const ipMap = {}
        const repeat = []
        const unique = []
        selected.forEach((data) => {
          const ip = data.host.bk_host_innerip
          if (has(ipMap, ip)) {
            ipMap[ip].push(data)
          } else {
            ipMap[ip] = [data]
          }
        })
        Object.values(ipMap).forEach((value) => {
          if (value.length > 1) {
            repeat.push(...value)
          } else {
            unique.push(...value)
          }
        })
        this.repeatSelected = repeat
        this.uniqueSelected = unique
      },
      handleCancel() {
        this.$emit('cancel')
      },
      handleNextStep() {
        this.$emit('confirm', this.selected)
      }
    }
  }
</script>

<style lang="scss" scoped>
    .host-selector-layout {
        position: relative;
        height: 460px;
        min-height: 300px;
        padding: 0 0 50px;
        .layout-footer {
            position: sticky;
            bottom: 0;
            left: 0;
            height: 50px;
            border-top: 1px solid $borderColor;
            font-size: 0;
            text-align: right;
            background-color: #FAFBFD;
            padding: 8px 20px 9px;
            z-index: 100;
        }
    }
    .wrapper {
        height: 100%;
        .wrapper-left {
            width: 340px;
            height: 100%;
            border-right: 1px solid $borderColor;
            .title {
                padding: 0 20px;
                margin: 15px 0 20px 0;
                line-height:26px;
                font-size:20px;
                font-weight: normal;
                color: $textColor;
            }
            .selector-type {
                display: block;
                margin: 0px 20px;
            }
            .selector-component {
                margin-top: 10px;
                height: calc(100% - 105px);
            }
        }
        .wrapper-right {
            width: 510px;
            height: 100%;
            .selected-count {
                height: 42px;
                line-height: 42px;
                padding: 0 12px;
                background-color: #FAFBFD;
                font-size: 12px;
                font-weight: bold;
                color: $textColor;
            }
            .repeat-row {
                padding: 0 2px;
                line-height: 18px;
                background-color: #FE9C00;
                border-radius: 2px;
                color: #FFF;
                font-size: 12px;
            }
        }
    }
</style>
